/*!
 * Page: pages/information/list/list
 * License: MIT
 * Created: 2019-11-08 19:04
 */
@import '../../../var';
.header {
  position: fixed;
  z-index: 10;
  width: 100%;
  height: 70rpx;
  background-color: #fff;
  border-bottom: 1rpx solid $border-color;
}

.nav {
  position: fixed;
  left: 30rpx;
  z-index: 99 !important;
  width: 690rpx;
  line-height: 48rpx;
  white-space: nowrap;
}
.nav-item {
  display: inline-block;
  height: 48rpx;
  margin-right: 30rpx;
  color: #333333;
  font-size: 24rpx;
  text-align: center;
  .itemBox {
    position: relative;
    .item-title {
      position: relative;
      z-index: 2;
      padding: 0rpx 10rpx;
      font-weight: 600;
      font-size: 30rpx;
    }
    .item-content-acitve {
      background-color: $primary-color;
    }
    .item-content {
      position: absolute;
      bottom: 8rpx;
      width: 100%;
      height: 15rpx;
      border-radius: 5rpx;
    }
  }
}

.nav-item.active {
  color: $primary-color;
}
.section {
  margin-top: 70rpx;
  padding-bottom: 20rpx;
  .noInfos {
    display: flex;
    justify-content: center;
    margin-top: 100rpx;
  }
  .list {
    .item {
      display: flex;
      width: 100%;
      padding: 32rpx 30rpx;
      border-bottom: 1rpx solid $border-color;
    }
    .item1 {
      display: flex;
      align-items: center;
      .content {
        flex: 1;
        .title {
          width: 100%;
          padding-right: 20rpx;
          color: #333333;
          font-weight: 600;
          font-size: 32rpx;
        }
        .footer {
          display: flex;
          width: 100%;
          margin-top: 10rpx;
          color: $info-color;
          font-size: 20rpx;
          .name {
            max-width: 120rpx;
            margin-right: 20rpx;
          }
          .comment {
            margin-right: 20rpx;
          }
        }
      }
      .img {
        width: 227rpx;
        height: 170rpx;
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
    .item2 {
      flex-wrap: wrap;
      .title {
        width: 100%;
        color: #333333;
        font-weight: 600;
        font-size: 32rpx;
      }
      .images {
        width: 100%;
        margin: 25rpx 0;
        .video-wrap {
          position: relative;
          height: 500rpx;

          .image {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: $bgcolor-gray 100% 100% / cover no-repeat;

            &::after {
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              display: block;
              background: linear-gradient(transparent 50%, rgba(#000, 0.4) 100%);
              content: '';
            }
          }

          .play-icon {
            position: absolute;
            bottom: 15rpx;
            left: 15rpx;
            width: 120rpx;
            height: 120rpx;
          }
        }
      }
      .imgBox {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin: 25rpx 0;
        .img {
          width: 227rpx;
          height: 170rpx;
          overflow: hidden;
          image {
            width: 100%;
            height: 100%;
          }
        }
      }
      .footer {
        display: flex;
        width: 100%;
        margin-top: 10rpx;
        color: $info-color;
        font-size: 20rpx;
        .name {
          max-width: 120rpx;
          margin-right: 20rpx;
        }
        .comment {
          margin-right: 20rpx;
        }
      }
    }
  }
}
